<template>
  <div class="containers">
    <div class="canvas" ref="bpmnCanvas"></div>
  </div>
</template>

<script setup lang="ts">
import { xmlStr } from '@/resource/leavebpmn20'
import { ref, onMounted } from 'vue'
import BpmnViewer from 'bpmn-js'

const bpmnCanvas = ref()
onMounted(() => {
  const viewer = new BpmnViewer({
    container: bpmnCanvas.value,
  })

  viewer
    .importXML(xmlStr)
    .then((result) => {
      const { warnings } = result
      console.log('success !', warnings)
      const canvas = viewer.get('canvas')
      canvas.zoom('fit-viewport', 'auto')
      canvas.viewbox(false)
    })
    .catch((err) => {
      const { warnings, message } = err
      console.log('something went wrong:', warnings, message)
    })
})
</script>

<style scoped>
.containers {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.canvas {
  width: 100%;
  height: 100%;
}

:deep(.bjs-powered-by) {
  display: none;
}
</style>
